<template>
  <Dialog
    v-model="showModel"
    title="导出用户积分"
    @opened="handleOpened"
    @confirm="exportData"
  >
    <div class="export-tokens">
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
      >
        <el-form-item
          label="导出对象"
          prop="type"
        >
          <el-radio-group
            v-model="form.type"
            @change="handleTypeChange"
          >
            <el-radio :label="1">
              导出客群用户
            </el-radio>
            <el-radio :label="2">
              导出全量客户
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="form.type === 1"
          prop="userGroupId"
          style="margin-left: 80px;"
        >
          <el-select
            v-model="form.userGroupId"
            placeholder="请选择客群"
            filterable
          >
            <el-option
              v-for="item in userGroupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="footer">
        <el-button @click="showModel=false">
          取消
        </el-button>
        <el-button
          v-notice-export="{ shouldNotice: exportLoading}"
          type="primary"
          @click="exportData"
        >
          确定
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import type { Ref } from "vue";
import type { ITokenItem } from "@/api/modules/tokensManagement";
import type { IUserGroupItem } from "@/api/modules/canvasApi";
import moment from "moment"
import ExportDataApi from "@/api/exportDataApi"; 
import canvasApi from "@/api/canvasApi"; 
import ApiResult from "@/api/base/ApiResult";

const props = withDefaults(defineProps<{
  show: boolean;
  row: ITokenItem;
}>(), {
  show: false,
})

const emits = defineEmits<{
  (e: "update:show", value: boolean): void
}>()

const showModel = computed({
  get() {
    return props.show
  },
  set(val) {
    emits("update:show", val)
  }
})

const formRef = ref();
const beanName = "userCurrencyNumExport" 
const form = reactive<{
  beanName: 'userCurrencyNumExport';
  exportVos: string[];
  conditionLimit: number;
  type: 1 | 2;
  userGroupId: number | string;
  currencyId: number | string;
  exportName: string;
}>({
  beanName, // 固定
  exportVos: [ 'phoneNum', 'currencyNum' ], // 固定
  conditionLimit: 1, // 固定
  type: 1,
  userGroupId: '',
  currencyId: '',
  exportName: '',
});
const formRules = ref({
  type: [ {
    required: true,
    message: "请选择导出对象",
    trigger: "change",
  } ],
  userGroupId: [ {
    required: true,
    message: "请选择客群",
    trigger: "change",
  } ]
})

const userGroupList:Ref<IUserGroupItem[]> = ref([])
const getCustomerGroupList = async () => {
  const rs = await canvasApi.getUserGroupList({
    currentPage: 1,
    showCount: -1,
  })

  if (rs.code === 200) {
    userGroupList.value = rs.payload ?? []
  }
}

const handleTypeChange = (val: string | number | boolean) => {
  if (val !== 1) {
    form.userGroupId = ""; // 清空选择的客群
  }
}

const exportLoading = ref(false)
const exportData = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      exportLoading.value = true;
      form.currencyId = props.row.id;
      form.exportName = `用户剩余${props.row.name}${moment().format("YYYYMMDDHHmmss")}`

      const data = {
        beanName,
        param: JSON.stringify(form)
      }
      const rs:ApiResult<null> = await ExportDataApi.setExportData(data);
      if (rs.code === 200) {
        ElMessage.success("数据已加入导出队列，正在准备执行导出，请勿重复操作！");
        showModel.value = false;
      }
      exportLoading.value = false;
    }
  })
}

const handleOpened = async () => {
  getCustomerGroupList()
}
  
</script>

<style scoped lang="scss">

</style>